<template>
	<view>
		<navigator url="../login/login">注册</navigator>
		<view class="" v-if="value==1">
			{{message}}
		</view>
		
		<view class="" v-else-if="value==2">
			{{message2}}
		</view>
		
		<view class="" v-else>
			{{message3}}
		</view>
		
		
		{{num + 1}}
		
		<image :src="flagImage" ></image>
		
		<view :class="className">
			这是一段能变颜色的文字
		</view>
		
		<button type="default" @click="setRed">红色</button>
		<button type="default" @click="setGreen">绿色</button>
		
		<view class="">{{stu}}</view>
		<view class="">{{stu.name}}</view>
		<view class="">{{stu.hobbies[0]}}</view>
		<view class="">{{stu.hobbies[1]}}</view>
		
		
		<button type="primary" @click="addStudent">添加学生</button>
		
		<view class="">
			<view class="" v-for="(item,index) in stuList">
				<!-- {{stuList[0].id + ', ' + stuList[0].name + ', ' + stuList[0].age}} -->
				<!-- {{item.id + ', ' + item.name + ', ' + item.age}} -->
				<label>
					<checkbox :value="item.id" />
					<text>
						{{index + ': ' + item.name + ', ' + item.age + ', '}}
						
						<block class="" v-for="(item2,index2) in item.hobbies">
							{{item2 + ', '}}
							<!-- {{item.hobbies[1]}} -->
						</block>
					</text>
				</label>
			</view>
			
			<view class="">
				{{stuList[1].id + ', ' + stuList[1].name + ', ' + stuList[1].age}}
			</view>
			
			<view class="">
				{{stuList[2].id + ', ' + stuList[2].name + ', ' + stuList[2].age}}
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {				
				value: 1,
				message: 'hello world!',
				message2: 'hello world! 2',
				message3: 'hello world! 3',
				
				flagImage: '../../static/images/国徽.jpg',
				num: 1,
				className: 'red',
				
				stu: {
					id: 1,
					name: '张三',
					age: 18,
					hobbies: ['篮球', '足球']
				},
				
				stuList: [
					{
						id: "1",
						name: '张三',
						age: 18,
						hobbies: ['篮球', '足球']
					},
					{
						id: "2",
						name: '李四',
						age: 19,
						hobbies: ['卡拉OK', '足球']
					},
					{
						id: "3",
						name: '王五',
						age: 20,
						hobbies: ['跳舞', '睡觉']
					},
				]
			}
		},
		methods: {
			setRed() {
				this.className = 'red';
			},
			
			setGreen() {
				this.className = 'green';
			},
			
			addStudent() {
				const newStu = {
					id: "4",
					name: '新生' ,
					age: 20,
					hobbies: ['跳舞', '睡觉']
				};
				
				this.stuList.push(newStu);
			}
			
		}
	}
</script>

<style>
	.red {
		color: red;
	}
	
	.green {
		color: green;
	}
</style>